<script setup lang="ts">
</script>

<template>
  <div>
    <!-- 导航栏 -->
    <div class="nav">
      <router-link to="/productList" exact-active-class="active-link">首页</router-link>
      <router-link to="/myOrder" exact-active-class="active-link">我的订单</router-link>
      <router-link to="/couponList" exact-active-class="active-link">领取优惠券</router-link>
      <router-link to="/myCouponList" exact-active-class="active-link">我的优惠券</router-link>
      <router-link to="/login" exact-active-class="active-link">登录</router-link>
      <router-link to="/" exact-active-class="active-link">注册</router-link>
    </div>

    <!-- 页面内容 -->
    <router-view />
  </div>
</template>

<style scoped>
/* 导航栏样式 */
.nav {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f10180; /* 更新为粉色背景 */
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  z-index: 1000; /* 确保导航栏始终在最上层 */
}

.nav a {
  color: white; /* 设置链接文字颜色 */
  text-decoration: none; /* 移除默认的下划线 */
  font-size: 16px;
  padding: 8px 15px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.nav a:hover {
  background-color: #ff6cbf; /* 鼠标悬停时的背景色 */
  color: white;
}

/* 高亮当前活动链接 */
.nav .active-link {
  background-color: #d40070; /* 活动页面的背景色，深粉色 */
  color: white; /* 保持文字颜色为白色 */
}

/* 给页面内容留出空间，避免被导航栏遮挡 */
router-view {
  margin-top: 60px; /* 导航栏的高度 */
  padding: 20px;
}
</style>
